<template>
    <a-layout class="layout">
        <a-layout-content class="content">
            <div class="title">身份确认</div>
            <a-form ref="formRef" class="form-container" @submit.prevent="handleSubmit">
                <a-form-item>
                    <a-input v-model:value="phone" placeholder="请输入手机号" />
                </a-form-item>
                <a-form-item>
                    <a-input v-model:value="confirmPhone" placeholder="请再次确认手机号" />
                </a-form-item>
                <a-form-item class="button-container">
                    <a-button
                        style="height: 40px; width: 70%"
                        type="primary"
                        block
                        html-type="submit"
                    >
                        提交
                    </a-button>
                </a-form-item>
            </a-form>
        </a-layout-content>
    </a-layout>
</template>

<script setup>
import { ref } from 'vue';
import { message } from 'ant-design-vue';
import { errorHandler } from '@/utils';
import { PhoneLoginPost } from '@/apis/user.ts';
import { useRouter } from 'vue-router';

const router = useRouter();
const phone = ref('18211133157');
const confirmPhone = ref('18211133157');

async function Login() {
    try {
        const res = await PhoneLoginPost({
            requestBody: {
                phone_number: confirmPhone.value,
            },
        });
        console.log('登录成功：', res);
        router.push({ name: 'diagnoseRecord' });
    } catch (error) {
        errorHandler(error);
    }
}

function isValidPhoneNumber(phoneNumber) {
    const regex = /^1[3-9]\d{9}$/;
    return regex.test(phoneNumber);
}

const handleSubmit = async () => {
    if (!isValidPhoneNumber(phone.value)) {
        message.error('手机号格式不正确');
        return;
    }
    if (phone.value === confirmPhone.value) {
        await Login();
    } else {
        message.error('两次输入的手机号不一致！');
    }
};
</script>

<style scoped>
.layout {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #fff;
}
.content {
    position: relative; /* 设置相对定位 */
    width: 100%;
    max-width: 300px;
    text-align: center;
    padding-bottom: 60px; /* 为底部按钮预留空间 */
}
.title {
    font-size: 32px;
    margin: 70px auto;
}
.form-container {
    display: flex;
    flex-direction: column;
    height: 100%; /* 设置高度为100% */
    .ant-input {
        height: 45px;
        border-radius: 9px;
        background: rgba(238, 238, 238, 0.94);
        padding-left: 24px;
    }
    .ant-input::placeholder {
        color: rgba(117, 116, 117, 0.65);
    }
}
.button-container {
    position: absolute;
    bottom: 77px;
    left: 0;
    width: 100%;
    .ant-btn {
        border-radius: 5px;
        box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.04);
        background: rgb(0, 120, 195);
    }
}
</style>
